<template>
  <div class="home">
    <site-head />
    <div class="site_carousel">
      <el-carousel
        indicator-position="none"
        arrow="never"
        ref="carousel"
        :autoplay="carouselAutoplay"
        @change="carouselChange"
      >
        <el-carousel-item>
          <div class="site_recommend">
            <RecommendItem />
          </div>
        </el-carousel-item>
        <el-carousel-item v-for="item in banners" :key="item.id">
          <router-link
            :to="'/play/' + item.id"
            class="banner_link"
            :style="{ 'background-image': 'url(' + item.coverImg + ')' }"
          ></router-link>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="banner_arrow">
      <router-link
        to="/"
        :class="{ nav_link: true, check_arrow: carouselCheckIndex === 0 }"
        @mouseover.native="setActiveItem(0)"
      >
        <svg-icon
          v-if="carouselCheckIndex != 0"
          class="svg"
          icon-class="eyes"
        />
        <svg-icon v-else class="svg" icon-class="eyes-hover" />
        猜你会追
      </router-link>
      <span
        to="/"
        :class="{ arrow_title: true, check_arrow: carouselCheckIndex != 0 }"
      >
        <svg-icon
          v-if="carouselCheckIndex === 0"
          class="svg"
          icon-class="fire"
        />
        <svg-icon v-else class="svg" icon-class="fire-hover" />
        <span>重磅推荐</span>
      </span>
      <div
        class="banner_container"
        v-for="(item, index) in banners"
        :key="item.id"
      >
        <router-link
          :to="'/play/' + item.id"
          :class="{
            arrow: true,
            check_arrow: carouselCheckIndex === index + 1,
          }"
          @mouseover.native="setActiveItem(index + 1)"
          @mouseout.native="carouselAutoplay = true"
          :title="item.videoName + '：' + item.title"
          >{{ item.videoName }}</router-link
        >
        <span
          class="banner_title"
          :style="{
            visibility: carouselCheckIndex === index + 1 ? 'visible' : 'hidden',
          }"
          >{{ item.title }}</span
        >
      </div>
    </div>
    <div class="mod_main_nav">
      <el-row v-for="(i, index) in navList" :key="index">
        <NavItem
          v-for="item in i"
          :key="item.id"
          :navItem="item"
          :span="24 / navSize"
        />
      </el-row>
    </div>
    <div class="mod_box">
      <ModItem v-for="item in navs" :key="item.id" :modItemInfo="item" />
    </div>
  </div>
</template>

<script>
import SiteHead from "@/components/SiteHead";
import NavItem from "./NavItem";
import ModItem from "./ModItem";
import RecommendItem from "./RecommendItem";
import { getCategoryList } from "@/api/category";
import { getBannerList } from "@/api/banner";
export default {
  name: "Home",
  navs: [],
  components: {
    SiteHead,
    NavItem,
    ModItem,
    RecommendItem,
  },
  created() {
    this.getNavs();
    this.getBanners();
    this.$store.dispatch("label/init");
  },
  data() {
    return {
      navSize: 3,
      navList: [],
      carouselAutoplay: true,
      banners: [],
      carouselCheckIndex: 0,
      navs: [],
    };
  },
  methods: {
    initNavList() {
      const lang = Math.ceil(this.navs.length / this.navSize);
      var b = 0;
      var list = [];
      for (var i = 0; i < lang; i++) {
        var child = [];
        for (var a = 0; a < this.navSize; a++) {
          if (b < this.navs.length) {
            child.push(this.navs[b]);
            b++;
          }
        }
        list.push(child);
      }
      this.navList = list;
    },
    setActiveItem: function (index) {
      this.$refs.carousel.setActiveItem(index);
      this.carouselAutoplay = false;
    },
    carouselChange(checkIndex) {
      this.carouselCheckIndex = checkIndex;
    },
    getNavs() {
      getCategoryList().then((v) => {
        this.navs = v.data;
        this.initNavList();
      });
    },
    getBanners() {
      getBannerList().then((v) => {
        this.banners = v.data;
      });
    },
  },
};
</script>

<style lang="scss">
@media (max-width: 1789px) {
  .home {
    .mod_box {
      width: 1300px;
    }
  }
}
@media (max-width: 1549px) {
  .home {
    .mod_box {
      width: 1200px;
    }
  }
}
@media (max-width: 1280px) {
  .home {
    height: 420px !important;
    .mod_box {
      width: 990px;
    }
    .el-carousel__container {
      height: 420px !important;
    }
    .banner_arrow{
      height: 357px !important;
    }
  }
}

.home {
      .el-carousel__container {
      height: 500px ;
    }
  position: absolute;
  .svg {
    font-size: 15px;
  }
  min-width: 1000px;
  width: 100%;
  height: 500px;
  .mod_main_nav {
    width: 80%;
    height: 100px;
    margin: 0 auto;
    padding-top: 15px;

    .el-row {
      padding-bottom: 20px;
    }
  }
  .mod_box {
    // width: 80%;
    margin: 0 auto;
    padding-top: 15px;
  }
  .site_carousel {
    background-color: black;
    .el-carousel {
      margin: 0 auto;
      width: 100%;
    }
    .site_recommend {
      width: 100%;
      height: 500px;
      background-image: url("../../banner/home-back.png");
      background-size: 100% 100%;
    }
  }
  .banner_link {
    display: block;
    height: 500px;
  }
  .banner_arrow {
    margin-top: 64px;
    z-index: 2;
    position: absolute;
    right: 0;
    top: 0;
    background-color: rgba(15, 15, 30, 0.4);
    width: 20%;
    min-width: 200px;
    height: 430px;
    .arrow_title {
      font-size: 20px;
      font-weight: 700;
      margin-left: 50px;
      color: rgba(255, 255, 255, 0.7);
    }
    .svg-icon {
      margin-left: -26px;
      margin-right: 5px;
    }
    .arrow {
      margin-top: 10px;
      float: left;
      margin-left: 10px;
    }
    a {
      margin-left: 50px !important ;
      text-decoration: none;
      display: block;
      font-size: 15px;
      color: rgba(255, 255, 255, 0.7);
    }
    .nav_link::after {
      position: absolute;
      right: 15px;
      top: 50px;
      left: 15px;
      height: 1px;
      background-color: rgba(255, 255, 255, 0.13);
    }
    .check_title {
      color: #ffffff;
    }
    .banner_container {
      width: 100%;
      height: 34px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .banner_title {
      float: left;
      font-size: 13px;
      margin-top: 18px;
      margin-left: 10px;
      color: #ff5c38;
    }
    .check_arrow {
      color: #ff5c38;
      font-size: 20px;
      font-weight: 700;
      span {
        color: #ffffff;
      }
    }

    a:hover {
      color: #ff5c38;
      font-size: 20px;
      font-weight: 700;
    }
    .nav_link {
      margin: 10px 0px 20px 0px;
      font-size: 20px;
      font-weight: 700;
      line-height: 35px;
    }
  }
}
</style>
